import React from 'react';

import { connect } from 'dva'

import { LegendAbstract } from 'components/Abstract'
import Title from 'components/Title'
import Chart from 'components/Chart'

@connect(({ project }) => ({ ...project }))
class LineAnalysis extends React.Component {
  static defaultProps = {
    echartsConf: [
      {
        key: 'gwjs',
        label: '管道建设情况',
        Items: [
          { name: '计划管道长度', field: 'PLANPIPELENGTH' },
          { name: '完成管道长度', field: 'FINISHPIPELENGTH' },
          { name: '在建管道长度', field: 'BUILDPIPELENGTH' }
        ],
        chart: {
          type: 'Pie', dataSource: 'StatisticsResource1',
          color: ['#4482ff', '#4ecb73', '#fbd437'],
          other: { radius: ['0%', '60%'] }, // 设置饼图中心
          columns: {
            name: '管道长度', field: [{ name: 'name', value: 'value' }]
          }
        },
        legend: { isShow: false, options: { vField: 'value', tField: 'name', unit: 'km' } },
        server: {
          serverType: 'project/queryStatistics',
          payload: { where: "BUILDYEAR='2018'" },
          tablename: 'zdpipeplanning',
          type: 1,
        },
      },
    ]
  }

  constructor(props) {
    super(props);

    let time;
    if ('defaultValue' in props) {
      time = props.defaultValue;
    }
    this.state = {
      time,
    };
  }

  componentDidMount() {
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue){
      if (nextProps.defaultValue){
        this.setState({
          time: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  init = async () => {
    await this.setDateECharts()
  }

  // 图表
  setDateECharts = () => {
    this.props.echartsConf.map(ele => {
      const { server } = ele;
      // 如果有 server则调用
      if (server) this.queryECharts(server);
    })
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time } = this.state;
    let { serverType: type, ...payload } = server;

    // 处理
    const where = `BUILDYEAR='${time}'`
    Object.assign(payload, { payload: { where }})
    await this.props.dispatch({
      type,
      payload
    });
  }

  /** 
   * 组件渲染
   */
  RenderLegend = (dataSource, params) => {
    const { options } = params;
    return <LegendAbstract dataSource={dataSource} options={options} />
  }

  render = () => {
    const { props } = this;

    let charts = null;
    charts = props.echartsConf.map(ele => {
      const { key, label, chart, legend, Items } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;

      // 处理结果	计划管道长度（km）
      let Data = []
      const resource = props[dataSource];
      if(Items){
        Items.forEach(ele => {
          const { field } = ele;
          const value = resource && (resource[field] || resource[field] === 0) ? resource[field]: ' '
          Data.push(Object.assign(ele, { value }))
        })
      }

      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={Data}
            other={other}
            style={{ paddingBottom: '20px' }}
          />
          {legend && (
            this.RenderLegend(Data, legend)
          )}
        </Title>
      )
    })
    return <>{charts}</>
  }
}

export default LineAnalysis;
